<template>
  <div class="wrapper">
    <div class="white"></div>
    <div class="text">
      <p>此页面显示相应数据预测和阶段曲线</p>
    </div>
    <vue-particles
        class="login-background"
        color="#97D0F2"
        :particleOpacity="0.7"
        :particlesNumber="50"
        shapeType="circle"
        :particleSize="4"
        linesColor="#97D0F2"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push">
    </vue-particles>
  </div>
</template>


<script>
export default {
  name: "future"
}
</script>

<style scoped lang="less">
  .wrapper{
    width: 100vw;
  }
  .login-background{
    height: 84vh;
    background-image: linear-gradient(to top, #44a299 20%, #1f1fcd 80%);
  }
  .white{
    height: 8vh;
  }
  .text{
    position: absolute;
    color: #f6f6f6;
    z-index: 999;
    height: 40vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2vh;
  }
</style>